<template>
  <div class="h100">
      <div @click="flag = true">
          <img class="img" :src="details.serial.Picture" alt="">
      </div>

      <h3 @click="cityFlag = true">
          城市： {{ cityInfo.CityName }}
      </h3>

      <transition name="slide">
          <CarType v-show="flag">
              <!-- <p @click="flag = false">返回</p> -->
          </CarType>
      </transition>
      
      <transition name="slide">
          <City 
            @changeCityName="changeCityName"
            :cityInfo="cityInfo"  
            v-show="cityFlag" />
      </transition>
      

  </div>
</template>

<script>
import { getClient, getDealerAlllist } from '@/api/carList'
import CarType from '@/components/img/CarType'
import City from '@/components/dealer/City'
export default {
    data() {
        return {
            cityInfo: {},
            details: {
                serial: {}
            },
            flag: false,
            // 城市弹框
            cityFlag: false
        }
    },
    components: {
        CarType,
        City
    },
    async created() {
        let res = await getClient()
        this.cityInfo = res.data.data
        let allList = await getDealerAlllist({
            carId: this.$route.params.id,
            cityId: this.cityInfo.CityID
        })
        
        this.details = allList.data.data.details
        // 
        // console.log(this.details)
    },
    methods: {
        changeCityName(info) {
            this.cityFlag = info.cityFlag
            // 修改城市名称
            this.cityInfo.CityName = info.name
        }
    }
}
</script>

<style scoped>
.img {
    width: 100px;
    height: 70px;
}
</style>